<template>
  <div class="news-wrap">
    <div class="news-l">
      <div
        class="news-tab"
        v-for="item in list.itemList.children"
        :key="item.id"
        :class="{ active: tabIndex == item.id }"
        @click="newTabFn(item.id, item.bllName)"
      >
        <p>{{ item.bllName }}</p>
      </div>
    </div>
    <div class="news-r">
      <div v-show="!articl.content">
        <!-- <div> -->
        <p
          class="news-title"
          v-for="item in articlList"
          :key="item.id"
          @click="getArticl(item.id)"
        >
          <span class="article-name" :title="item.articleName">
            {{ item.articleName }}
          </span>
          <span class="article-time">{{
            item.createTime.substring(0, 10)
          }}</span>
        </p>
      </div>
      <div class="articl-title-con" v-show="articl.content">
        <!-- <div> -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <!-- <el-breadcrumb-item :to="{ path: '/' }"> -->
          <el-breadcrumb-item>
            <span style="cursor: pointer" @click="indexFn">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <span style="cursor: pointer" @click="articlFn">{{ bllName }}</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item class="artic-title">
            {{ articl.articleName }}
          </el-breadcrumb-item>
        </el-breadcrumb>
        <div class="articl-title">{{ articl.articleName }}</div>
        <div class="articl-time">{{ articl.createTime }}</div>
        <div class="articl-con" v-html="articl.content"></div>
      </div>
    </div>
  </div>
</template>

<script>
// getArticlList 获取文章列表 getArticl 获取文章内容 getArticlMeunList 获取文章上级的列表数据
import { getArticlList, getArticl, getArticlMeunList } from "@/api/index.js";
import "@/assets/areaxList.css";
export default {
  data() {
    return {
      // 路由传参
      list: {
        itemList: {},
        itemChildrenList: {},
      },
      // 左侧切换index
      tabIndex: 0,
      // 文章类型名称
      bllName: "",
      // 右侧文章列表数据
      articlList: [],
      // 文章内容
      articl: "",
      dataForWeixin: {
        title: '中国家庭教育学会',		// 分享标题
        desc: '中国家庭教育学会',	// 分享内容
        linkurl: null, // 分享链接
        img: 'https://zgjjxh.org.cn/582abde5cf428b73f6dc1902a046a18.jpg',				// 分享内容显示的图片(图片必须是正方形的链接)
      }
    };
  },
  created() {
    // {parentId 子tab id tabIndex articlId 文章id}
    let data = this.$route.query;
    this.articl = JSON.parse(sessionStorage.getItem("articl"));
    if (data.parentId) {
      sessionStorage.setItem("navIndex", data.parentId);
      // 左侧列表获取
      getArticlMeunList({ parentId: data.parentId }).then((res) => {
        this.list.itemChildrenList = res.data;
        this.list.itemList.children = res.data;
        this.bllName = sessionStorage.getItem("tabName");
        if (data.tabIndex) {
          this.tabIndex = data.tabIndex;
          let bllNameList = this.list.itemList.children.filter((e) => {
            return this.tabIndex == e.id;
          });
          this.bllName = bllNameList[0].bllName;
          sessionStorage.setItem("tabIndex", this.tabIndex);
        }

        this.newConFn(this.tabIndex, this.bllName);
        this.getArticlList();
      });
    }
    this.dataForWeixin.linkurl = location.href.split('#')[0]
    this.wxShare();
    if (
      data.articlId ||
      data.articlId != "undefined" ||
      data.articlId != undefined
    ) {
      if (data.articlId == sessionStorage.getItem("articlId")) {
        data.articlId = sessionStorage.getItem("articlId");
      }
      this.getArticl(data.articlId);
    }
    this.tabIndex = sessionStorage.getItem("tabIndex");
  },
  methods: {
    wxShare(){
      console.log(this.articl)
    },
    // 文章左侧列表点击
    newTabFn(id, bllName) {
      this.articl.content = "";
      sessionStorage.setItem("articl", JSON.stringify(this.articl));
      this.tabIndex = id;
      this.bllName = bllName;
      sessionStorage.setItem("tabIndex", this.tabIndex);
      sessionStorage.setItem("tabName", this.bllName);
      // 修改本路由参数，防止栏目跳转出现错乱
      let parentId = sessionStorage.getItem("navIndex");
      let tabIndex = sessionStorage.getItem("tabIndex");
      let articlId = sessionStorage.getItem("articlId");
      this.$router.push({
        query: { parentId, tabIndex, articlId: articlId ? null : articlId },
      });
      this.getArticlList();
      //   this.articlFn();
    },
    newConFn(id, bllName) {
      // this.articl = "";
      this.tabIndex = id;
      //   sessionStorage.setItem("tabIndex", this.tabIndex);
      this.bllName = bllName;
      //   this.getArticlList();
    },
    // 获取文章列表
    getArticlList() {
      getArticlList({ articlTypeId: this.tabIndex }).then((res) => {
        if (res.rows) {
          let list = JSON.stringify(res.rows);
          this.articlList = JSON.parse(list);
          // 判断如果栏目只有一篇文章，那么将直接打开该文章
          if (this.articlList.length < 2) {
            this.getArticl(this.articlList[0].id);
          }
        } else {
          this.articlList = "";
        }
      });
    },
    // 获取文章
    getArticl(id) {
      sessionStorage.setItem("articlId", id);
      if (id) {
        sessionStorage.setItem("tabName", this.bllName);
        getArticl(id).then((res) => {
          this.articl = res.data;
          this.wxShare();
          let articl = JSON.stringify(this.articl);
          // console.log(articl)
          sessionStorage.setItem("articl", articl);
          let parentId = sessionStorage.getItem("navIndex");
          let tabIndex = sessionStorage.getItem("tabIndex");
          //   let articlId = sessionStorage.getItem("articlId");
          this.$router.push({ query: { parentId, articlId: id, tabIndex } });
        });
      }
    },
    // 文章面包屑点击
    articlFn() {
      this.articl.content = "";
      let articl = JSON.stringify(this.articl);
      sessionStorage.setItem("articl", articl);
      sessionStorage.setItem("articlId", "");
      let parentId = sessionStorage.getItem("navIndex");
      let tabIndex = sessionStorage.getItem("tabIndex");
      this.$router.push({ query: { parentId, tabIndex } });
    },
    // 文章面包屑首页点击
    indexFn() {
      sessionStorage.setItem("navIndex", 0);
      this.$router.push({
        path: "/",
      });
    },
  },
  mounted() {

  },
  watch: {
    $route: {
      handler(newData) {
        this.articl.content = "";
        sessionStorage.setItem("articl", JSON.stringify(this.articl));
        sessionStorage.setItem("tabIndex", this.tabIndex);
        if (newData.query.parentId) {
          getArticlMeunList({ parentId: newData.query.parentId }).then(
            (res) => {
              this.list.itemChildrenList = res.data;
              this.list.itemList.children = res.data;
              // this.tabIndex = this.list.itemList.children[0].id;
              this.bllName = this.list.itemList.children[0].bllName;

              if (newData.query.tabIndex) {
                if (
                  newData.query.tabIndex != sessionStorage.getItem("tabIndex")
                ) {
                  newData.query.tabIndex = sessionStorage.getItem("tabIndex");
                }
                this.tabIndex = newData.query.tabIndex;
                let bllNameList = this.list.itemList.children.filter((e) => {
                  return this.tabIndex == e.id;
                });
                // console.log(bllNameList[0]);
                this.bllName = bllNameList[0].bllName;
                sessionStorage.setItem("tabIndex", this.tabIndex);
                this.getArticlList();
              }
              if (
                !newData.query.articlId ||
                newData.query.articlId != "undefined" ||
                newData.query.articlId != undefined
              ) {
                this.getArticl(newData.query.articlId);
              }
              //   else {
              //       console.log("测试测试")
              //     this.newTabFn(this.tabIndex, this.bllName);
              //   }
            }
          );
        }
      },
      deep: true,
    },
  },
};
</script>

<style>

</style>
